<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,h2,h4,ul,p {margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
#box{width:220px;margin: 50px auto;position: relative;}
#header{width: 200px;height: 30px;padding: 0 10px;background-color: blue; border-top-left-radius: 10px;border-top-right-radius: 10px;}
#header h2,a{font-size: 16px;color: #fff;line-height: 30px;}
#header h2{float: left;}
#header a {float: right;font-weight: bold;}
#container{height: 400px;padding-top:20px;border-left: 1px solid #eee; border-right:1px solid #aaa;overflow: hidden;position:relative;}/*最后是解决IE7以下overflow失效问题*/
#wrap{width:220px;position: relative;top: 0;}   /* IE下如果自身没有设置top值会自动设为auto，导致parseInt后为NaN*/
#wrap li{padding:10px 0 10px 10px; border-bottom: 1px dashed #aaa;}
#wrap h4{padding-bottom: 8px;}
#wrap p,#wrap span{font-size:12px; font-family: Arial}
#wrap span{color: #aaa;}
.span1{width:220px;position: absolute;left: 0;background-color: #ccc; line-height: 20px;text-align: center;font-size: 12px; color: #fff; cursor: pointer;}
#up{top: 30px;}
#down{bottom: 0;}
</style>
<script>
window.onload = function  () {
	var oUp = document.getElementById('up');
	var oDown = document.getElementById('down');
	var oUl = document.getElementById('wrap');
	var aLi = oUl.getElementsByTagName('li');
	var timer= null;

	oUp.onmousedown = function (){
		clearInterval(timer);
		timer = setInterval(function(){
			//alert(getStyle(oUl,'top'))	//如果父级#container没有给left：0;会得到auto
			var speed = parseInt(getStyle(oUl,'top')) + 20;
			if (speed > 0) {
				speed = 0;
			};
			oUl.style.top = speed + 'px';
		},200);
	}
/*
	document.onmouseup = function (){
		clearInterval(timer);
	}*/

	oDown.onmousedown = function (){
		clearInterval(timer);
		timer = setInterval(function(){
			var speed = parseInt(getStyle(oUl,'top')) + -20;
			if (speed < -340) {
				speed = -340;
			};
			oUl.style.top = speed + 'px';
		},200);
	}

	document.onmousemove = function () {		//阻止默认事件，防止在有选中文字的情况下up失效
		return false;
	}

	document.onmouseup = function (){			//交给父级处理
		clearInterval(timer);
	}
}

function getStyle(obj,attr){
	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
</script>
</head>
<body>
	<div id="box">
		<div id="header">
			<h2>热销商品</h2>
			<a href="#">>>更多</a>
		</div>
		<div id="container">			<!-- 需要用这个当做容器，时移动时隐藏掉一部分ul -->
			<ul id="wrap">
				<li>
					<h4>标题一</h4>
					<p>Mac翻新产品<br/>iPod翻新产品</p>
					<span>12:35</span>
				</li>
				<li>
					<h4>标题二</h4>
					<p>RMB5,780<br/>最低降了30%</p>
					<span>10:32</span>
				</li>
				<li>
					<h4>标题三</h4>
					<p>Mac完全解析</p>
					<span>08:11</span>
				</li>
				<li>
					<h4>标题四</h4>
					<p>无线网络基础</p>
					<span>23:23</span>
				</li>
				<li>
					<h4>标题五</h4>
					<p>从PC到Mac<br/>基础知识</p>
					<span>22:35</span>
				</li>
				<li>
					<h4>标题六</h4>
					<p>转移到Mac</p>
					<span>20:05</span>
				</li>
				<li>
					<h4>标题七</h4>
					<p>各种Mac机</p>
					<span>17:37</span>
				</li>
				<li>
					<h4>标题八</h4>
					<p>RMB348起<br/>最多降低了43%</p>
					<span>14:24</span>
				</li>
			</ul>
		</div>
		<span class="span1" id="up">▲</span>
		<span class="span1" id="down">▼</span>
	</div>
</body>
</html>